<template>
    <div class="xtx-pagination" v-if="total>0">
        <a v-if="myCurrentPage <= 1" href="javascript:;" class="disabled">上一页</a>
        <a v-else href="javascript:;" @click="changePage(myCurrentPage - 1)">上一页</a>
        <span v-if="pager.start > 1">...</span>
        <a href="javascript:;" @click="changePage(i)" :class="{ active: i === myCurrentPage }" v-for="i in pager.btnArr"
            :key="i">{{ i }}</a>
        <span v-if="pager.end < pager.totalPage">...</span>
        <a v-if="myCurrentPage >= pager.totalPage" href="javascript:;" class="disabled">下一页</a>
        <a v-else href="javascript:;" @click="changePage(myCurrentPage + 1)">下一页</a>
    </div>
</template>
<script>
import { ref, computed ,watch} from 'vue'
export default {
    name: 'XtxPagination',
    props: {
        total: {
            type: Number,
            default: 100
        },
        currentPage: {
            type: Number,
            default: 1
        },
        pageSize: {
            type: Number,
            default: 10
        }
    },
    setup(props,{emit}) {
        //当前页
        const myCurrentPage = ref(1)
        //总评论条数
        const total = ref(100)
        //每页评论条数
        const pageSize = ref(10)
        //按钮个数 5
        const btnCount = 5
        //计算属性 => start end totalPage 
        const pager = computed(() => {
            //总页数
            const totalPage = Math.ceil(total.value / pageSize.value)
            //计算距离当前页的偏移量
            const offset = Math.floor(btnCount / 2)
            //起始页
            let start = myCurrentPage.value - offset
            //结束页
            let end = start + btnCount - 1
            //判断 起始页 < 1
            if (start < 1) {
                start = 1
                end = (start + btnCount - 1) > totalPage ? totalPage : (start + btnCount - 1)
            }
            //判断 end > 结束页
            if (end > totalPage) {
                end = totalPage
                start = (end - btnCount + 1) < 1 ? 1 : (end - btnCount + 1)
            }
            //计算出 按钮数组
            const btnArr = []
            for (let i = start; i <= end; i++) {
                btnArr.push(i)
            }
            return {
                start,
                end,
                totalPage,
                btnArr
            }
        })
        //按钮点击事件
        // 改变页码
        const changePage = (newPage) => {
            if (myCurrentPage.value !== newPage) {
                myCurrentPage.value = newPage
                // 通知父组件最新页码
                emit('current-change', newPage)
            }
        }
        // 监听传入的值改变
        watch(props, () => {
            total.value = props.total
            pageSize.value = props.pageSize
            myCurrentPage.value = props.currentPage
        }, { immediate: true })

        return {
            myCurrentPage,
            pager,
            changePage
        }
    }
}
</script>
<style scoped lang="less">
.xtx-pagination {
    display: flex;
    justify-content: center;
    padding: 30px;

    >a {
        display: inline-block;
        padding: 5px 10px;
        border: 1px solid #e4e4e4;
        border-radius: 4px;
        margin-right: 10px;

        &:hover {
            color: @xtxColor;
        }

        &.active {
            background: @xtxColor;
            color: #fff;
            border-color: @xtxColor;
        }

        &.disabled {
            cursor: not-allowed;
            opacity: 0.4;

            &:hover {
                color: #333
            }
        }
    }

    >span {
        margin-right: 10px;
    }
}
</style>